<!DOCTYPE html>
<HTML>
    <HEAD>
        <META charset="utf-8"></META>
        <title>主页</title>
        <link rel="stylesheet" href="css/base.css?t=1">

        <style>
            #modulesDiv{
                padding: 10px;
                user-select: none;
            }

            #modulesDiv>div{
                display: inline-block;
                padding:50px;
                background-color: white;
                border-radius: 10px;
                box-shadow: 0 0 5px yellow;
                cursor: pointer;
                margin: 10px;
            }
            #modulesDiv>div:hover{
                background-color:lightgoldenrodyellow;
            }
            #modulesDiv>div:active{
                background-color:pink;
                box-shadow: 0 0 10px lightpink;
            }
        </style>
    </HEAD>
    <body>
        <div class="flex-row flex-row-single flex-center">
            <h2 style="color:green">智慧养老室监控平台</h2>
        </div>
        <hr>
        
        <div class="flex-row" id="modulesDiv">

        </div>


        <script>
            function loaddata(){
                // 1. 加载所有项目的模块
                fetch("/cgi-bin/modules").then(resp=>resp.json()).then(data=>{
                    // {code: 0, data: [{id: 模块ID, title: 模块名称}] }
                    data.data.forEach(m => {
                        let div = document.createElement("div");
                        div.innerText = m.title;
                        
                        div.onclick = function(){
                            localStorage.current_module=m.id;
                            location.href = "/data.html";
                        }

                        modulesDiv.append(div);
                    });
                })
            }

            // 当页面加载完成后
            window.onload = function(){
                loaddata();
            }

        </script>
    </body>
</HTML>